import React, { Component } from 'react';
import { Text, Image, View, DeviceEventEmitter, TouchableOpacity, ScrollView, NativeAppEventEmitter } from 'react-native';
import { unitWidth, width } from '../constants/AdapterUtil';
import { MyHeader } from '../components/MyHeader';
import Colors from '../constants/Colors';
import { postFetch } from '../constants/HttpExtension';
import { show } from '../constants/Toast';
import { api_member_info_Certification, api_member_info_companyRealname, api_member_info_indeed, api_order_workorder_oneCate, api_order_workorder_sonCate } from '../constants/HttpServices';
import { SubmitButton1 } from '../components/Button';
import { MyInput1, MyInput2 } from '../components/Input';
import TextUtil from '../constants/TextUtil';
import { ChooseSingleImageItem, ChooseMultiplyImageItem, TextItem, ChooseTimeItem, ReleaseComponentItem, Item1 } from '../components/Item';
import { LoadingAndPorgressModal } from '../components/Modal';
import { uploadFile } from '../constants/UpLoadHelper';
import TimePickerUtil from '../components/TimePicker';

export default class ChooseCateScreen extends Component {

    constructor(props) {
        super(props)

        const { navigation } = this.props;
        this.onChooseSuccess = this.props.navigation.getParam('onChooseSuccess', () => { })
        this.state = {
            oneCate: [],
            twoCate: [],
            threeCate: [],

            oneChoose: -1,
            twoChoose: -1,
            threeChoose: -1,
        }
    }

    componentDidMount() {
        this.getOneCate();
    }

    componentWillUnmount() {

    };

    render() {
        return (
            <View style={{ flex: 1, backgroundColor: Colors.colorF5 }}>
                <MyHeader title='选择询价类目' leftImg={require('../res/ic_arrow_left.png')} leftClick={() => { this.props.navigation.pop() }}
                    righttext='完成' rightClick={() => {
                        if (this.state.twoChoose == -1) {
                            show('请选择二级分类')
                            return;
                        }
                        // if (this.state.threeChoose == -1) {
                        //     show('请选择三级分类')
                        //     return;
                        // }
                        this.onChooseSuccess ? this.onChooseSuccess(this.state.oneCate[this.state.oneChoose], this.state.twoCate[this.state.twoChoose], this.state.threeCate[this.state.threeChoose]) : null
                        this.props.navigation.pop()
                    }} />
                <ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
                    <View style={{ paddingHorizontal: 10 * unitWidth, flexDirection: 'row', flexWrap: 'wrap', marginTop: 20 * unitWidth }}>
                        {this.getView(this.state.oneCate, '1')}
                    </View>
                    <View style={{ paddingHorizontal: 10 * unitWidth, flexDirection: 'row', flexWrap: 'wrap', marginTop: 30 * unitWidth }}>
                        {this.getView(this.state.twoCate, '2')}
                    </View>
                    <View style={{ paddingHorizontal: 10 * unitWidth, flexDirection: 'row', flexWrap: 'wrap', marginTop: 30 * unitWidth }}>
                        {this.getView(this.state.threeCate)}
                    </View>
                </ScrollView>
            </View>
        );
    }

    getView(list, type) {
        let views = []
        let temp = this.state.oneChoose;
        if (type == '1') {
            temp = this.state.oneChoose;
        } else if (type == '2') {
            temp = this.state.twoChoose;
        } else {
            temp = this.state.threeChoose;
        }
        for (let i = 0, len = list.length; i < len; i++) {
            let item = list[i];
            views.push(
                <TouchableOpacity key={i} style={{
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: temp == i ? Colors.colorOrange : Colors.coloree,
                    borderRadius: 7,
                    paddingHorizontal: 7 * unitWidth,
                    marginHorizontal: 7 * unitWidth,
                    marginTop: 10 * unitWidth,
                    height: 34 * unitWidth
                }} activeOpacity={0.5} onPress={() => {
                    if (type == '1') {
                        this.setState({
                            oneChoose: i,
                            twoChoose: -1,
                            threeChoose: -1,
                            twoCate: [],
                            threeCate: []
                        }, () => {
                            this.getTwoCate(item.id)
                        })
                    } else if (type == '2') {
                        this.setState({
                            twoChoose: i,
                            threeChoose: -1,
                            threeCate: []
                        }, () => {
                            this.getThreeCate(item.id)
                        })
                    } else {
                        this.setState({
                            threeChoose: i,
                        })
                    }
                }}>
                    <Text style={{ color: temp == i ? Colors.white : Colors.color99 }}>{item.name}</Text>
                </TouchableOpacity>
            )
        }
        return views;
    }

    //获取一级类目
    getOneCate() {
        let params = {

        }
        postFetch(api_order_workorder_oneCate, params, {
            success: (response) => {
                this.setState({
                    oneCate: response.result
                })
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }

    //获取二级类目
    getTwoCate(id) {
        let params = {
            id: id
        }
        postFetch(api_order_workorder_sonCate, params, {
            success: (response) => {
                this.setState({
                    twoCate: response.result
                })
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }

    //获取三级类目
    getThreeCate(id) {
        let params = {
            id: id
        }
        postFetch(api_order_workorder_sonCate, params, {
            success: (response) => {
                this.setState({
                    threeCate: response.result
                })
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }
}